<template>
<div>
    <detail-banner 
     :sightName="sightName"
     :bannerImg="bannerImg"
     :gallaryImgs="gallaryImgs"
     ></detail-banner>
    <detail-header></detail-header>
    <div class="content">
         <detail-list :list="list"></detail-list>
    </div>
</div>
</template>
<script>
import DetailBanner from './components/banner'
import DetailHeader from './components/header'
import DetailList from './components/list'
import axios from 'axios'
export default {
    name:'Detail',//作用可用于递归组件，其次对某个页面取消缓存时，再者在开发调试工具里会显示一个个组件名
    components :{
        DetailBanner,
        DetailHeader,
        DetailList
    },
    data () {
    return{
        sightName:'',
        bannerImg:'',
        gallaryImgs:[],
        list:[]
    }
},
methods:{
  getDetailInfo () {
      axios.get('/api/detail.json',{
          params:{
              id:this.$route.params.id
          }
      })
      .then(this.handleGetDataSucc)
  },
  handleGetDataSucc (res) {
    res = res.data
   if(res.ret && res.data){
       const data =res.data
       this.sightName=data.sightName
       this.bannerImg = data.bannerImg
       this.gallaryImgs=data.gallaryImgs
       this.list=data.categoryList
   }
  }
},
mounted () {
    this.getDetailInfo()
}

}
</script>
<style lang="stylus" scoped>
 .content
   height 50rem
</style>
